<style lang="less" scoped>
@import "../assets/css/index1.css";

.orderBox .el-carousel {
  height: 82%;
}

.mapshili {
  position: absolute;
  right: 0;
  bottom: 10px;
  padding: 0 10px;
  z-index: 999;

  li {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: #fff;
    margin-left: 20px;

    div {
      width: 40px;
      margin-right: 4px;
    }

    img {
      width: 20px;
      display: block;
      margin: 0 auto;
    }
  }
}

.left {
  width: 35%;
}

.middle {
  width: 30%;
}

.right {
  width: 35%;
}

.lefttopflex {
  height: 50%;
  display: flex;
}

.swiperbox {
  width: 100%;
  height: 100%;

  .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .swiper-slide {
    width: 100%;
    height: 99%;
    margin-right: 30px;
  }

  .orderItem {
    width: 100%;
    height: 97%;
    // border-radius: 20px 20px 20px 20px;
    overflow: hidden;
  }
}

/* 志愿者组织项目 */
.volunbox {
  width: 49%;
}

.volunboxtop {
  margin-top: 10px;
  margin-bottom: 10px;
}

.volunboxtop ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.volunboxtop ul li {
  width: 36%;
  height: 30px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #eecb5f;
  background: linear-gradient(238deg,
      rgba(3, 199, 249, 0.77) 0%,
      rgba(52, 255, 212, 0.77) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.volunboxtop ul li:nth-child(3) {
  width: 25%;
}

.volunboxcontent {
  display: flex;
  justify-content: space-between;
  height: 80%;
  overflow: scroll;
}

.volunboxcontent::-webkit-scrollbar {
  display: none;
}

.volunlist {
  width: 36%;
  height: 100%;

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .SwiperBox2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.voluncon {
  padding-left: 10px;
  padding-right: 4px;
  height: 88%;
  overflow-y: scroll;

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .SwiperBox1,
  .SwiperBox3,
  .SwiperBox2 {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .swiperlist {
      margin-top: 5px;

      .swieprright {
        width: auto;
        display: flex;
        justify-content: space-around;
      }

      .swipertitem {
        margin-top: 10px;
      }

      .titlebox {
        p {
          font-size: 18px;
          line-height: 30px;
          text-align: center;
          font-weight: 400;
        }

        p:nth-child(2) {
          color: #eecb5f;
        }
      }

      .titlecon {
        line-height: 30px;
      }
    }
  }

  .SwiperBox2 {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    margin-bottom: 0 !important;
  }

  .SwiperBox3 {
    width: 100%;
  }
}

.volunlist:nth-child(3) {
  width: 25%;
}

.volunitem {
  height: 126px;
}

.itemname {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #eecb5f;
}

.itemtime {
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: rgba(254, 254, 254, 1);
}

.mapMask {
  width: 85%;
  max-height: 240px;
  min-height: 220px;
  background: rgba(33, 232, 255, 0.4);
  border-radius: 10px 10px 0px 10px;
  box-shadow: inset 2px 2px 10px 2px #21e8ff;
  padding: 40px 20px 20px 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;

  .mapcontitle {
    font-weight: bold;
    line-height: 30px;
    font-size: 20px;
  }

  p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: rgba(255, 255, 255, 1);
    line-height: 1.6;
  }

  .iconimg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
<style lang="less">
.swiperbox /deep/ .swiper-wrapper {
  transition-timing-function: linear !important;
}
</style>
<template>
  <!-- content -->
  <div class="backg">
    <div class="top">
      <p>{{ nowTime }}</p>
      <!--<p>晴 0℃—2℃</p>-->
      <img src="../assets/images/topbj.png" />
      <p>{{ weather1 }}{{ weather }}</p>
    </div>
    <!--时间，地点，类型，项目，队伍-->
    <div class="bottom">
      <div class="left">
        <div class="lefttopflex">
          <!-- 自主点单 -->
          <div class="orderBox">
            <div class="orderTop">
              <img src="../assets/images/leftdian.png" alt="" />
              <p>自主点单</p>
              <img src="../assets/images/rightdian.png" alt="" />
            </div>
            <ul>
              <div class="swiperbox">
                <swiper :options="swiperOption" ref="mySwiper2" v-if="orderList.length > 0">
                  <swiper-slide v-for="(item, index) in orderList" :key="index">
                    <li class="orderItem">
                      <div class="item1">
                        <p class="name">{{ item.orderType || item.typestr }}</p>
                        <div class="circle"></div>
                        <p class="status">{{ item.statusstr }}</p>
                      </div>
                      <div class="orderboxflex">
                        <div class="orderleft">
                          <div class="item2">
                            <img src="../assets/images/xiangmumc.png" style="width: 18px;" alt="" />
                            <p>
                              项目名称:<span>{{
                                item.projectName || "暂无"
                              }}</span>
                            </p>
                          </div>
                          <div class="item2">
                            <img src="../assets/images/duiwu.png" style="width: 18px;height: 15px;" alt="" />
                            <p class="title">
                              接单队伍:<span>{{ item.orgName || "暂无" }}</span>
                            </p>
                          </div>
                          <div class="item2">
                            <img src="../assets/images/dizhi.png" alt="" />
                            <p class="title" style="margin-left: 5px;">
                              地址:<span>{{ item.address }}</span>
                            </p>
                          </div>
                          <div class="item2">
                            <img src="../assets/images/xuqiuneirong.png" alt="" />
                            <p class="title">
                              内容:<span>{{
                                item.activityContent || "暂无"
                              }}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </li>
                  </swiper-slide>
                </swiper>
              </div>
            </ul>
          </div>
          <!-- 志愿服务时长 -->
          <div class="volunbox">
            <div class="volunboxtop">
              <ul>
                <li>项目:</li>
                <li>组织:</li>
                <li>志愿者:</li>
              </ul>
            </div>
            <div class="volunboxcontent">
              <ul class="volunlist">
                <li class="volunitem" v-for="(stat, index) in statisticalList" :key="index">
                  <p class="itemname">
                    {{ stat.name }}
                  </p>
                  <p class="itemtime">
                    服务<span>{{
                      parseFloat(stat.serviceHours / 60).toFixed(2)
                    }}</span>小时
                  </p>
                </li>
              </ul>
              <ul class="volunlist">
                <li class="volunitem" v-for="(stat, index) in statisticalList1" :key="index">
                  <p class="itemname">
                    {{ stat.name }}
                  </p>
                  <p class="itemtime">
                    服务<span>{{
                      parseFloat(stat.serviceHours / 60).toFixed(2)
                    }}</span>小时
                  </p>
                </li>
              </ul>
              <ul class="volunlist">
                <li class="volunitem" v-for="(stat, index) in statisticalList2" :key="index">
                  <p class="itemname">
                    {{ stat.realName || stat.nickName }}
                  </p>
                  <p class="itemtime">
                    服务<span>{{
                      parseFloat(stat.serviceHours / 60).toFixed(2)
                    }}</span>小时
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="leftflex">
          <!-- 区域志愿者比例 -->
          <div class="lefttwo">
            <div class="orderTop">
              <img src="../assets/images/leftdian.png" alt="" />
              <p>区域志愿者情况</p>
              <img src="../assets/images/rightdian.png" alt="" />
            </div>
            <div id="echarts1" ref="echarts1" style="width:100%;height:83%;"></div>
          </div>
          <!-- 服务时长情况 -->
          <div class="leftthree">
            <div class="orderTop">
              <img src="../assets/images/leftdian.png" alt="" />
              <p>区域党员情况</p>
              <img src="../assets/images/rightdian.png" alt="" />
            </div>
            <div id="echarts5" ref="echarts5" style="width:100%;height:83%;"></div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="mapbox">
          <div class="maptop" v-show="show1">
            <div class="maptitle mapactive">活动</div>
            <div class="maptitle" @click="mapzd">阵地</div>
          </div>
          <div class="maptop1" v-show="show2">
            <div class="maptitle1" @click="mapactive">活动</div>
            <div class="maptitle1 mapactive1">阵地</div>
          </div>
          <P class="mapcon" v-if="show1">美丽晋源 文明实践</P>
          <P class="mapactivity" v-if="show1">正在进行的活动：<span>{{ countMap }}个</span></P>
          <ul class="mapshili" v-show="show1">
            <li>
              <div><img src="../assets/images/new1.png" /></div>
              宣传宣讲党的政策( {{ activenum1 }}个 )
            </li>
            <li>
              <div><img src="../assets/images/new2.png" /></div>
              学习实践科学理论( {{ activenum2 }}个 )
            </li>
            <li>
              <div>
                <img src="../assets/images/new3.png" style="width: 25px;" />
              </div>
              培育践行主流价值( {{ activenum3 }}个 )
            </li>
            <li>
              <div><img src="../assets/images/new4.png" /></div>
              丰富活跃文化生活( {{ activenum4 }}个 )
            </li>
            <li>
              <div>
                <img src="../assets/images/new5.png" style="width: 24px;" />
              </div>
              持续推动移风易俗( {{ activenum5 }}个 )
            </li>
            <li>
              <div><img src="../assets/images/new6.png" /></div>
              其他( {{ activenum6 }}个 )
            </li>
          </ul>
          <ul class="mapshili" v-show="show2">
            <li>
              <div>
                <img src="../assets/images/hongxin.png" style="width: 24px;" />
              </div>
              实践中心( {{ zdnum1 }}个 )
            </li>
            <li>
              <div><img src="../assets/images/suo.png" /></div>
              实践所( {{ zdnum2 }}个 )
            </li>
            <li>
              <div><img src="../assets/images/zhan4.png" /></div>
              实践站( {{ zdnum3 }}个 )
            </li>
            <li>
              <div>
                <img src="../assets/images/dian.png" style="width: 17px;" />
              </div>
              实践点( {{ zdnum4 }}个 )
            </li>
          </ul>
          <div id="container"></div>
          <!--<div id="container1" v-if="show2"></div>-->
          <div class="mapMask" v-show="maskShow">
            <img src="../assets/images/close.png" class="iconimg" @click="maskShow = false" />
            <p class="mapcontitle">{{ mapcon.name }}</p>
            <P class="mapconoorg">{{ mapcon.organName }}</P>
            <div style="display: flex;width: 100%;">
              <img src="../assets/images/dizhi.png" style="width: 13px;height: 17px; margin-right: 5px;margin-top:8px;" />
              <p>地址：{{ mapcon.serviceAddress }}</p>
            </div>
            <div style="display: flex;width: 100%;">
              <img src="../assets/images/time.png" style="width: 17px;height: 17px;margin-right: 5px;margin-top: 9px;" />
              <p>活动时间： {{ mapcon.startDate }} -{{ mapcon.endDate }}</p>
            </div>
          </div>
          <div class="mapMask" v-show="maskShow1">
            <img src="../assets/images/close.png" class="iconimg" @click="maskShow1 = false" />
            <p class="mapcontitle">{{ mapcon.name }}</p>
            <div style="display: flex;width: 100%;">
              <img src="../assets/images/dizhi.png" style="width: 13px;height: 17px; margin-right: 5px;margin-top:8px;" />
              <p>地址： {{ mapcon.addrss }}</p>
            </div>
          </div>
          <img src="../assets/images/mapbj.png" class="mapimg" />
        </div>
      </div>
      <div class="right">
        <!-- 志愿数据 -->
        <div class="right1">
          <div class="threetop">
            <img src="../assets/images/leftdian.png" alt="" />
            <div class="totaltitle">
              <div class="threetitle" :class="{ threeactive: activeIndex === 0 }" @click="active(0)">
                志愿数据
              </div>
              <div class="threetitle" :class="{ threeactive: activeIndex === 1 }" @click="active(1)">
                志愿队伍
              </div>
              <div class="threetitle" :class="{ threeactive: activeIndex === 2 }" @click="active(2)">
                示范站
              </div>
              <div class="threetitle" :class="{ threeactive: activeIndex === 3 }" @click="active(3)">
                点单反馈
              </div>
            </div>
            <img src="../assets/images/rightdian.png" alt="" />
          </div>
          <!-- 志愿数据-->
          <ul class="voluncon" v-if="activeIndex === 0">
            <li style="display: flex;" v-for="(item, index) in volunlist" :key="index">
              <div style="width: 46%; display: flex;align-items: center;">
                <p>{{ item.name }}</p>
                <img src="../assets/images/fangkuai.png" />
              </div>
              <span v-for="(item1, ind) in item.num" :key="ind">
                {{ item1 }}
              </span>
            </li>
          </ul>
          <!-- 特色队伍-->
          <ul class="voluncon" v-if="activeIndex == 1">
            <swiper :options="swiperOption5" ref="mySwiper2">
              <swiper-slide class="SwiperBox1" v-for="(vol, i) in volunlist1" :key="i">
                <li class="swiperlist">
                  <p class="titlecon">{{ vol.name }}</p>
                  <div class="swieprright">
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>点单数</p>
                        <p>{{ vol.createNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>接单数</p>
                        <p>{{ vol.acceptNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>活动数</p>
                        <p>{{ vol.activityNum }}</p>
                      </div>
                    </div>
                  </div>
                </li>
              </swiper-slide>
              <swiper-slide class="SwiperBox1" v-for="(item4, index) in volunlist4" :key="index">
                <li class="swiperlist">
                  <p class="titlecon">{{ item4.name }}</p>
                  <div class="swieprright">
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>点单数</p>
                        <p>{{ item4.createNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>接单数</p>
                        <p>{{ item4.acceptNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>活动数</p>
                        <p>{{ item4.activityNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>志愿者数</p>
                        <p>{{ item4.volNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>党员数</p>
                        <p>{{ item4.partyNum }}</p>
                      </div>
                    </div>
                  </div>
                </li>
              </swiper-slide>
            </swiper>
          </ul>
          <!-- 示范站-->
          <ul class="voluncon" v-if="activeIndex === 2">
            <swiper :options="swiperOption7" ref="mySwiper2" v-if="volunlist2.length > 0">
              <swiper-slide class="SwiperBox3" v-for="(item2, index) in volunlist2" :key="index">
                <li class="swiperlist">
                  <p class="titlecon">{{ item2.name }}</p>
                  <div class="swieprright">
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>点单数</p>
                        <p>{{ item2.orderNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>接单数</p>
                        <p>{{ item2.orderNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>活动数</p>
                        <p>{{ item2.activityNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>志愿者数</p>
                        <p>{{ item2.volNum }}</p>
                      </div>
                    </div>
                    <div class="swipertitem">
                      <div class="titlebox">
                        <p>党员数</p>
                        <p>{{ item2.partyNum }}</p>
                      </div>
                    </div>
                  </div>
                </li>
              </swiper-slide>
            </swiper>
          </ul>
          <!-- 点单反馈-->
          <ul class="voluncon" v-if="activeIndex === 3">
            <li style="display: flex;" v-for="(item, index) in volunlist3" :key="index">
              <div style="width: 46%; display: flex;align-items: center;">
                <p>{{ item.name }}</p>
                <img src="../assets/images/fangkuai.png" />
              </div>
              <span v-for="(item1, ind) in item.num" :key="ind">
                {{ item1 }}
              </span>
            </li>
          </ul>
        </div>
        <div class="echartbox">
          <!-- 活动分布 -->
          <div style="width:49%;height: 100%;">
            <div class="orderTop">
              <img src="../assets/images/leftdian.png" alt="" />
              <p>活动分布</p>
              <img src="../assets/images/rightdian.png" alt="" />
            </div>
            <div id="echarts3" ref="echarts3" style="width:100%;height:83%;"></div>
          </div>
          <!-- 服务时长情况 -->
          <div class="leftthree">
            <div class="orderTop">
              <img src="../assets/images/leftdian.png" alt="" />
              <p>服务时长情况</p>
              <img src="../assets/images/rightdian.png" alt="" />
            </div>
            <div id="echarts2" ref="echarts2" style="width:100%;height:85%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const baseUrl = process.env.VUE_APP_BASE_URL;
import https from "../request/https";
import AMap from "AMap"; // 引入高德地图

export default {
  data() {
    return {
      activenum1: 0,
      activenum2: 0,
      activenum3: 0,
      activenum4: 0,
      activenum5: 0,
      activenum6: 0,
      zdnum1: 0,
      zdnum2: 0,
      zdnum3: 0,
      zdnum4: 0,
      createNum: 0,
      markers: [],
      show1: true,
      show2: false,
      activeIndex: 0,
      orderList: [],
      maskShow: false,
      maskShow1: false,
      volunlist: [
        {
          name: "志愿者总数",
          // num: "0"
          num: "42900"
        },
        {
          name: "志愿者队伍数",
          num: "0"
        },
        {
          name: "志愿服务活动数",
          num: "0"
        },
        {
          name: "志愿者服务时长",
          num: "0"
        },
        {
          name: "党员注册数",
          // num: "0"
          num: "6739"
        },
        {
          name: "党员服务时长",
          num: "0"
        },
        {
          name: "日均活动数",
          num: "0"
        },
        {
          name: "受益人数",
          num: "0"
        }
      ],
      volunlist1: [],
      volunlist2: [],
      volunlist4: [],
      volunlist3: [
        {
          name: "群众点单数",
          num: ""
        },
        {
          name: "中心派单数",
          num: ""
        },
        {
          name: "组织接单数",
          num: ""
        },
        {
          name: "群众满意度",
          num: "96.8"
        }
      ],
      datas1: {
        xData: [],
        volunData: [],
        politicalData: []
      },
      datas2: {
        xData: [],
        volunData: [],
        politicalData: []
      },
      datas3: {
        title: [],
        count: [],
        totalNum: ""
      },
      datas5: {
        xData: [],
        politicalData: []
      },
      color: ["#61A5E8", "#5DDFD7", "#7ECF51", "#2247B2", "#F982B4", "#EECB5F"],
      color1: [
        "#5DDFD7",
        "#61A5E8",
        "#7ECF51",
        "#2247B2",
        "#F982B4",
        "#EECB5F"
      ],
      map: null, //地图
      map1: null,
      statisticalType: 1, // 优秀志愿者
      statisticalList: [], //项目
      statisticalList1: [], //组织
      statisticalList2: [], //志愿者
      countMap: 0,
      markersList: [],
      fullHeight: 0,
      swiperOption: {
        loop: true,
        // initialSlide: 0,
        direction: "vertical",
        // slidesPerView: 1,
        // slidesPerColumn: 2,
        // spaceBetween: 30,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption1: {
        loop: true,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 3,
        // slidesPerColumn: 2,
        spaceBetween: 20,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption2: {
        loop: false,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 3,
        // slidesPerColumn: 2,
        spaceBetween: 30,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption3: {
        loop: false,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 3,
        // slidesPerColumn: 2,
        spaceBetween: 30,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption5: {
        loop: true,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 3,
        // slidesPerColumn: 2,
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption6: {
        loop: true,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 1,
        // slidesPerColumn: 2,
        spaceBetween: 30,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption7: {
        loop: true,
        // initialSlide: 0,
        direction: "vertical",
        slidesPerView: 3,
        // slidesPerColumn: 2,
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      volunteer1: {},
      volunteer2: {},
      volunteer3: {},
      timer: null, // 定时器名称
      timer1: null,
      nowTime: "",
      weather: "",
      weather1: "",
      currentIndex: 0,
      set1: "",
      set2: "",
      set3: "",
      set4: "",
      img1: require("../assets/images/dizhi.png"),
      img2: require("../assets/images/qzshijian.png"),
      echartsmax1: [], //党员最大值
      echartsmax2: [], //志愿者最大值
      swipernum: 0,
      array: {},
      mapcon: {},
      statData: [] //项目组织志愿者的数据
    };
  },
  created() {
    this.fullHeight = document.documentElement.clientHeight;
    this.getAutoOrder();
    this.getEcharts1();
    this.getEcharts2();
    this.getEcharts3();
  },
  mounted() {
    //初始化地图
    this.initMap();
    // 图表
    this.echarts1();
    this.echarts5();
    this.echarts2();
    this.echarts3();
    // 优秀志愿者
    this.getStatistical();
    this.getVolunData();
    this.getVolunData1();
    // this.getVolunData2();
    this.getteam(); //特色队伍接口
    this.gettree(); //所街办接口
    this.getsite(); //站接口
    setInterval(this.nowTimes, 60000);
    this.timer = setInterval(() => {
      (this.datas1 = {
        xData: [],
        volunData: [],
        politicalData: []
      }),
        (this.datas2 = {
          xData: [],
          volunData: [],
          politicalData: []
        }),
        (this.datas3 = {
          title: [],
          count: [],
          totalNum: ""
        }),
        (this.datas5 = {
          xData: [],
          politicalData: []
        }),
        (this.volunteer1 = {}),
        (this.volunteer2 = {}),
        (this.volunteer3 = {}),
        (this.orderList = []),
        (this.volunlist = [
          {
            name: "志愿者总数",
            // num: "0"
            num: "42900"
          },
          {
            name: "志愿者队伍数",
            num: "0"
          },
          {
            name: "志愿服务活动数",
            num: "0"
          },
          {
            name: "志愿者服务时长",
            num: "0"
          },
          {
            name: "党员注册数",
            // num: "0"
            num: "6739"
          },
          {
            name: "党员服务时长",
            num: "0"
          },
          {
            name: "日均活动数",
            num: "0"
          },
          {
            name: "受益人数",
            num: "0"
          }
        ]),
        (this.volunlist3 = [
          {
            name: "群众点单数",
            num: ""
          },
          {
            name: "中心派单数",
            num: ""
          },
          {
            name: "组织接单数",
            num: ""
          },
          {
            name: "群众满意度",
            num: "96.8"
          }
        ]),
        (this.statisticalList = []),
        (this.statisticalList1 = []), //组织
        (this.statisticalList2 = []),
        (this.markersList = []),
        (this.nowTime = ""),
        (this.weather = ""),
        (this.weather1 = ""),
        this.getStatistical();
      this.getVolunData();
      this.getVolunData1();
      // this.getVolunData2();
      this.getAutoOrder();
      this.getEcharts1();
      this.getEcharts2();
      this.getEcharts3();
      this.Getweather();
    }, 3600000);
    this.timer1 = setInterval(() => {
      this.map = null; //地图
      // this.map.destroy(); //地图清空
      this.countMap = 0;
      this.activenum1 = 0;
      this.activenum2 = 0;
      this.activenum3 = 0;
      this.activenum4 = 0;
      this.activenum5 = 0;
      this.activenum6 = 0;
      this.initMap();
    }, 180000);
    this.Getweather();
    this.timestampToTime();
  },
  watch: {
    datas: {
      deep: true, //深度监听设置为 true
      handler: function () {
        // this.setOptions(val);
        this.echarts1();
      }
    },
    datas1: {
      deep: true, //深度监听设置为 true
      handler: function () {
        // this.setOptions(val);
        this.echarts1();
      }
    },
    datas2: {
      deep: true,
      // 深度监听设置为true
      handler: function () {
        this.echarts2();
      }
    },
    // 3街道投诉
    datas3: {
      deep: true,
      handler: function () {
        // this.setOptions(val);
        this.echarts3();
      }
    },
    // 4异常投诉
    datas5: {
      deep: true,
      handler: function () {
        this.echarts5();
      }
    }
  },
  methods: {
    QueryActive() {
      this.map.remove(this.markers);
      this.markers = [];
      this.maskShow1 = false;
      // var data = [];
      // 活动
      var athis = this;
      var api = `${baseUrl}/apiJy/JyPcHugeDataApi/queryUnderWayActivity.json`;
      https.PostRequest(api).then(res => {
        if (res.data.code === 0) {
          var data = res.data.data.list;
          this.countMap = res.data.data.count;
          var count = res.data.data.typeCount;
          data.forEach(function (markerN) {
            if (markerN.longitude != 0) {
              var IconSrc = "";
              var zIndex = 100;
              if (markerN.acBigType === 1) {
                IconSrc = require("../assets/images/new1.png");
                zIndex = 100;
                athis.activenum1 = count[0].num;
              } else if (markerN.acBigType === 2) {
                IconSrc = require("../assets/images/new2.png");
                zIndex = 90;
                athis.activenum2 = count[1].num;
              } else if (markerN.acBigType === 3) {
                IconSrc = require("../assets/images/new3.png");
                zIndex = 80;
                athis.activenum3 = count[2].num;
              } else if (markerN.acBigType === 4) {
                IconSrc = require("../assets/images/new4.png");
                zIndex = 70;
                athis.activenum4 = count[3].num;
              } else if (markerN.acBigType === 5) {
                IconSrc = require("../assets/images/new5.png");
                zIndex = 60;
                athis.activenum5 = count[4].num;
              } else if (markerN.acBigType === 6) {
                IconSrc = require("../assets/images/new6.png");
                zIndex = 50;
                athis.activenum6 = count[5].num;
              }
              var marker2 = new AMap.Marker({
                map: athis.map,
                icon: new AMap.Icon({
                  image: IconSrc,
                  imageSize: new AMap.Size(24, 24)
                }),
                position: new AMap.LngLat(markerN.longitude, markerN.latitude),
                offset: new AMap.Pixel(-15, -15),
                zIndex: zIndex
              });
              athis.markers.push(marker2);
              var time = athis.timestampToTime(markerN.startDate).slice(0, 10);
              var time1 = athis.timestampToTime(markerN.endDate).slice(0, 10);
              marker2.on("click", function () {
                athis.maskShow = true;
                athis.mapcon = markerN;
                athis.mapcon.startDate = time;
                athis.mapcon.endDate = time1;
              });
            }
          });
        }
      });
    },
    QueryPosition() {
      this.maskShow = false;
      this.map.remove(this.markers);
      this.markers = [];
      var api1 = `${baseUrl}/apiJy/JyPcHugeDataApi/queryPointCenter.json`;
      // 中心
      var params1 = {
        classId: 1
      };
      var athis = this;
      var data1 = [];
      https.PostRequest(api1, params1).then(res => {
        if (res.data.code === 0) {
          data1 = res.data.data;
          athis.zdnum1 = data1.length;
          data1.forEach(function (markerN) {
            if (markerN.lng != 0) {
              var marker = new AMap.Marker({
                map: athis.map,
                icon: new AMap.Icon({
                  image: require("../assets/images/hongxin.gif"),
                  imageSize: new AMap.Size(50, 50)
                }),
                position: new AMap.LngLat(markerN.lat, markerN.lng),
                offset: new AMap.Pixel(-15, -15),
                zIndex: 100
              });
              athis.markers.push(marker);
              marker.on("click", function () {
                athis.maskShow1 = true;
                athis.mapcon = markerN;
              });
            }
          });
        }
      });

      // 所
      var params2 = {
        classId: 2
      };
      var data2 = [];
      https.PostRequest(api1, params2).then(res => {
        if (res.data.code === 0) {
          data2 = res.data.data;
          athis.zdnum2 = data2.length;
          data2.forEach(function (markerN) {
            if (markerN.lng != 0) {
              var marker = new AMap.Marker({
                map: athis.map,
                icon: new AMap.Icon({
                  image: require("../assets/images/suo.png"),
                  imageSize: new AMap.Size(28, 28)
                }),
                position: new AMap.LngLat(markerN.lat, markerN.lng),
                offset: new AMap.Pixel(-15, -15),
                zIndex: 90
              });
              athis.markers.push(marker);
              marker.on("click", function () {
                athis.maskShow1 = true;
                athis.mapcon = markerN;
              });
            }
          });
        }
      });

      // 站
      var params3 = {
        classId: 3
      };
      var data3 = [];
      https.PostRequest(api1, params3).then(res => {
        if (res.data.code === 0) {
          data3 = res.data.data;
          athis.zdnum3 = data3.length;
          data3.forEach(function (markerN) {
            if (markerN.lng != 0) {
              var marker = new AMap.Marker({
                map: athis.map,
                icon: new AMap.Icon({
                  image: require("../assets/images/zhan4.png"),
                  imageSize: new AMap.Size(26, 26)
                }),
                position: new AMap.LngLat(markerN.lat, markerN.lng),
                offset: new AMap.Pixel(-15, -15),
                zIndex: 80
              });
              athis.markers.push(marker);
              marker.on("click", function () {
                athis.maskShow1 = true;
                athis.mapcon = markerN;
              });
            }
          });
        }
      });

      // 点
      var params4 = {
        classId: 4
      };
      var data4 = [];
      https.PostRequest(api1, params4).then(res => {
        if (res.data.code === 0) {
          data4 = res.data.data;
          athis.zdnum4 = data4.length;
          data4.forEach(function (markerN) {
            if (markerN.lng != 0) {
              var marker = new AMap.Marker({
                map: athis.map,
                icon: new AMap.Icon({
                  image: require("../assets/images/dian.png"),
                  imageSize: new AMap.Size(16, 24)
                }),
                position: new AMap.LngLat(markerN.lat, markerN.lng),
                offset: new AMap.Pixel(-15, -15),
                zIndex: 80
              });
              athis.markers.push(marker);
              marker.on("click", function () {
                athis.maskShow1 = true;
                athis.mapcon = markerN;
              });
            }
          });
        }
      });
    },
    //活动点击
    mapactive() {
      this.show1 = true;
      this.show2 = false;
      this.QueryActive();
    },
    // 阵地点击
    mapzd() {
      this.show2 = true;
      this.show1 = false;
      this.QueryPosition();
    },
    active(index) {
      this.activeIndex = index;
      if (index === 0) {
        this.getVolunData();
      } else if (index === 1) {
        this.getteam();
      } else if (index === 2) {
        this.getsite();
      } else if (index === 3) {
        this.getVolunData1();
      }
    },
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let day = new Date(timeStamp).getDay();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      // let ss =
      //   new Date(timeStamp).getSeconds() < 10
      //     ? "0" + new Date(timeStamp).getSeconds()
      //     : new Date(timeStamp).getSeconds();
      switch (day) {
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
        case 0:
          day = "星期日";
          break;
        default:
          break;
      }
      this.nowTime =
        year +
        "-" +
        month +
        "-" +
        date +
        "" +
        " " +
        " " +
        " " +
        " " +
        hh +
        ":" +
        mm +
        "   " +
        "   " +
        day +
        "";
    },
    nowTimes() {
      this.timeFormate(new Date());
    },

    // 初始化地图
    initMap() {
      var athis = this;
      //区域掩模
      var mask = [];
      //初始化地图对象，加载地图
      athis.map = new AMap.Map("container", {
        mask: mask, //区域掩摸需要添加css
        // pitch: 15, //地图倾斜度，配合3D使用
        viewMode: "3D", //地图展示模式
        resizeEnable: true,
        dragEnable: true,
        // showLabel: false, //不显示地图文字标记
        mapStyle: "amap://styles/blue", //地图背景颜色
        // center: [112.432167, 37.701895], // //地图中心点
        center: [112.440167, 37.705193],
        zoom: 11.6, //地图显示的缩放级别  3d模式下可以使用小数点
        zooms: [11, 20] //设置地图缩放级别的范围
      });
      // 画出晋源区轮廓
      var district = null;
      //加载行政区划插件
      if (!district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district" //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      district.search("晋源区", function (status, result) {
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ];
        var holes = result.districtList[0].boundaries;
        //记录小店区范围-坐标数组，用于区域掩模
        for (var i = 0; i < holes.length; i += 1) {
          mask.push([holes[i]]);
        }

        //添加高度面-3D
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        // athis.map.add(object3Dlayer);
        var height = -8000;
        var color = "#61A5E8"; //rgba 3d轮廓颜色
        var wall = new AMap.Object3D.Wall({
          path: holes,
          height: height,
          color: color
        });
        wall.transparent = true;
        object3Dlayer.add(wall);

        //添加描边
        for (var h = 0; h < holes.length; h += 1) {
          new AMap.Polyline({
            path: holes[h],
            strokeColor: "#61A5E8",
            strokeWeight: 4,
            map: athis.map
          });
        }
        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        var polygon = new AMap.Polygon({});
        polygon.setPath(pathArray);
      });

      // var markers = new Array();
      if (this.show1) {
        athis.map.remove(this.markers);
        this.QueryActive();
      } else if (this.show2) {
        athis.map.remove(this.markers);
        this.QueryPosition();
        athis.maskShow = false;
        // 清空点位
      }
    },

    // 天气查询
    Getweather() {
      // 数据请求
      // var AppKey = "e083446313e1ce6037979d0adb323c7d";
      // var Apiurl = "JH/query?city='太原'&key=" + AppKey;
      var Apiurl =
        "http://apis.juhe.cn/simpleWeather/query?city=太原&key=e083446313e1ce6037979d0adb323c7d";

    },

    // ==============================图表

    // 区域志愿者比例
    echarts1() {
      var myChart1 = echarts.init(this.$refs.echarts1);
      var option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "#0E60B2"
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "2%",
          top: "8%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.datas1.xData,
            // data: ["义井", "罗城", "晋源", "金胜", "晋祠", "姚村"],
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              },
              interval: 0,
              // rotate: 40
              formatter: function (value) {
                return value.split("").join("\n");
              }
            }
          }
        ],
        yAxis: [
          {
            // max: Math.ceil(
            // Number(Math.max.apply(null, this.echartsmax2)).toFixed(1)
            // ), //设置最大值
            // min: 0,
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            },
            splitLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            }
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            // y轴
            axisLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: "志愿者",
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  formatter: "{c}",
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#b97bfd"
                  },
                  {
                    offset: 1,
                    color: "#5a2297"
                  }
                ])
              }
            },
            barWidth: "30",
            // data: this.datas1.volunData
            // data: [21678, 2496, 8216, 3312, 4815, 2383]
            data: [11414, 3287, 8764, 5361, 9117, 4958]
          }
        ]
      };
      myChart1.setOption(option1);
      // var index = 0; //播放所在下标
      // this.set1 = setInterval(function() {
      //   myChart1.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: index
      //   });
      //   index++;
      //   if (index >= option1.series[0].data.length) {
      //     index = 0;
      //   }
      // }, 30000);
    },
    // 区域党员比例
    echarts5() {
      var myChart5 = echarts.init(this.$refs.echarts5);
      var option5 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "#0E60B2"
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "2%",
          top: "8%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.datas5.xData,
            // data: ["义井", "罗城", "晋源", "金胜", "晋祠", "姚村"],
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              },
              interval: 0,
              // rotate: 40
              formatter: function (value) {
                return value.split("").join("\n");
              }
            }
          }
        ],
        yAxis: [
          {
            // max: Math.ceil(parseFloat(Math.max.apply(null, this.echartsmax1))),
            // min: 0,
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            },
            splitLine: {
              lineStyle: {
                color: "#42A4FF"
              }
            }
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            // y轴
            axisLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  formatter: "{c}",
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FADDB2"
                  },
                  {
                    offset: 1,
                    color: "#F19610"
                  }
                ])
              }
            },
            barWidth: "30",
            // data: this.datas5.politicalData
            // data: [2042, 549, 2004, 973, 887, 284]
            data: [809, 1137, 2544, 201, 1368, 490]
          }
        ]
      };
      myChart5.setOption(option5);
      // var currentIndex = -1;
      // function set2() {
      //   var dataLen = option5.series[0].data.length;
      //   currentIndex = (currentIndex + 1) % dataLen;
      //   // 取消之前高亮的图形
      //   myChart5.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      //   // currentIndex = (currentIndex + 1) % dataLen;
      //   // 高亮当前图形
      //   myChart5.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      //   // 显示 tooltip
      //   myChart5.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      // }
      // this.set2 = setInterval(set2, 30000);
    },

    // 服务时长情况
    echarts2() {
      var myChart2 = echarts.init(this.$refs.echarts2);
      var option2 = {
        color: ["#B33AFF", "#F19712"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "#5A2297",
          borderRadius: [10, 10, 10, 0]
        },
        legend: {
          left: "0",
          y: "10",
          icon: "circle",
          itemWidth: 14, // 设置宽度
          itemHeight: 14, // 设置高度
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          data: ["志愿者服务时长", "党员服务时长"]
        },
        grid: {
          // top: "18%",
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
                fontSize: 16
              },
              interval: 0,
              rotate: 40
              // formatter: function(value) {
              //   return value.split("").join("\n");
              // }
            },
            data: this.datas2.xData
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            }
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            // y轴
            axisLine: {
              show: true,
              lineStyle: {
                color: "#42A4FF"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: "志愿者服务时长",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#6941FF"
                },
                {
                  offset: 0.5,
                  color: "#B33AFF"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.4)"
                }
              ])
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14
                  }
                }
              }
            },
            data: this.datas2.volunData
          },
          {
            name: "党员服务时长",
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14
                  }
                }
              }
            },
            symbol: "circle",
            symbolSize: 5,
            data: this.datas2.politicalData
          }
        ]
      };
      myChart2.setOption(option2);
      // var currentIndex = -1;
      // function set3() {
      //   var dataLen = option2.series[0].data.length;
      //   currentIndex = (currentIndex + 1) % dataLen;
      //   // 取消之前高亮的图形
      //   myChart2.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      //   // currentIndex = (currentIndex + 1) % dataLen;
      //   // 高亮当前图形
      //   myChart2.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      //   // 显示 tooltip
      //   myChart2.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      // }
      // this.set3 = setInterval(set3, 30000);
    },

    // 活动分布
    echarts3() {
      var myChart3 = echarts.init(this.$refs.echarts3);
      var option3 = {
        color: this.color1,
        title: {
          text: "活动总数",
          textStyle: {
            fontSize: 16,
            color: "#fff"
          },
          subtext: this.datas3.totalNum + "个",
          subtextStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: 600
          },
          left: "38%",
          top: "44%"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // left: "64%",
          // top: "center",
          // left: "64%",
          top: "bottom",
          // orient: "vertical",
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          icon: "rect",
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 10,
          width: "300",
          height: "400",
          data: this.datas3.title
        },
        series: [
          {
            name: "活动分布",
            type: "pie",
            radius: [50, 90],
            center: ["50%", "50%"],
            roseType: "radius",
            emphasis: {
              label: {
                show: true
              }
            },
            label: {
              normal: {
                show: true,
                formatter: "{b} : \n{c} \n({d}%)",
                textStyle: {
                  // fontWeight: "normal",
                  fontSize: 14
                },
                position: "right",
                // formatter: ["{b}: {c}\n 所占比例: {d}% "].join("\n"), //这段文本采用样式a
                // borderWidth: 10,
                // borderRadius: 40,
                padding: [-85, -25, -95, -10],
                rich: {
                  a: {
                    fontSize: 14,
                    // lineHeight: 20,
                    align: "center"
                    // color: "#8798ad"
                  }
                }
              }
            },
            labelLine: {
              normal: {
                length: 1
                // smooth: 0.2
              }
            },
            data: this.datas3.count
          }
        ]
      };
      myChart3.setOption(option3);
      // setTimeout(function() {
      //   window.onresize = function() {
      //     myChart3.resize();
      //   };
      // }, 200);
      // var currentIndex = -1;
      // function set4() {
      //   var dataLen = option3.series[0].data.length;
      //   currentIndex = (currentIndex + 1) % dataLen;
      //   // 取消之前高亮的图形
      //   // myChart3.dispatchAction({
      //   //   type: "downplay",
      //   //   seriesIndex: 0,
      //   //   dataIndex: currentIndex
      //   // });
      //   // 高亮当前图形
      //   // myChart3.dispatchAction({
      //   //   type: "highlight",
      //   //   seriesIndex: 0,
      //   //   dataIndex: currentIndex
      //   // });
      //   // 显示 tooltip
      //   myChart3.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   });
      // }
      // this.set4 = setInterval(set4, 30000);
    },

    // ==============================接口

    // 自主点单
    getAutoOrder() {
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/queryOrderListByNum.json`;
      var params = {
        num: 10
      };
      https
        .PostRequest(Apiurl, params)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          this.orderList = datas;
        })
        .catch(err => {
        });
    },

    // 区域志愿者比例
    getEcharts1() {
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/queryStatisticsVolNum.json`;
      https
        .PostRequest(Apiurl)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          var volunteer = datas.volunteer; //志愿者
          for (var k = 0; k < volunteer.length; k++) {
            this.datas1.xData.push(volunteer[k].name);
            // this.datas1.volunData.push(volunteer[k].count);
          }
          var political = datas.political; //党员
          for (let i = 0; i < political.length; i++) {
            this.datas5.xData.push(political[i].name);
            // this.datas5.politicalData.push(political[i].count);
          }
        })
        .catch(err => {
        });
    },
    // 服务时长
    getEcharts2() {
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/queryStatisticsServiceHoursNum.json`;
      https
        .PostRequest(Apiurl)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          var political = datas.political; //党员
          var volunteer = datas.volunteer; //志愿者
          for (var i = 0; i < political.length; i++) {
            var name = political[i].name.substring(
              political[i].name.length - 1,
              political[i].name.length
            );
            var name1 = political[i].name.substring(
              political[i].name.length - 2,
              political[i].name.length
            );
            if (name === "镇") {
              political[i].name = political[i].name.replace(name, "所");
            }
            if (name1 === "街道") {
              political[i].name = political[i].name.replace(name1, "所");
            }
            this.datas2.xData.push(political[i].name);

            this.datas2.politicalData.push(
              parseFloat(political[i].count / 60).toFixed(2)
            );
          }

          for (var k = 0; k < volunteer.length; k++) {
            this.datas2.volunData.push(
              parseFloat(volunteer[k].count / 60).toFixed(2)
            );
          }
        })
        .catch(err => {
        });
    },
    // 志愿者相关数据
    getVolunData() {
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/statisticalVolunteer.json`;
      https
        .PostRequest(Apiurl)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          //志愿者总数
          // this.volunlist[0].num = String(datas.volunteerNum);
          // 志愿者队伍数
          this.volunlist[1].num = String(datas.organNum);
          // 志愿服务活动数
          this.volunlist[2].num = String(datas.activityNum);
          // 志愿者服务时长
          this.volunlist[3].num = String(datas.serviceHoursNum);
          // 党员注册数
          // this.volunlist[4].num = String(datas.politicalVolunteerNum);
          // 党员服务时长
          this.volunlist[5].num = String(datas.politicalServiceHoursNum);
          // 党员服务时长
          this.volunlist[6].num = String(datas.avgActivityNum);
          // 党员服务时长
          this.volunlist[7].num = String(datas.beneficiariesNum);
        })
        .catch(err => {
        });
    },
    // 点单反馈
    getVolunData1() {
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/statisticalOrder.json`;
      https
        .PostRequest(Apiurl)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          this.volunlist3[0].num = String(datas.orderAddNum);
          this.volunlist3[1].num = String(datas.orderAssignNum);
          this.volunlist3[2].num = String(datas.orderAcceptNum);
          this.volunlist3[3].num = String(96.8);
        })
        .catch(err => {
        });
    },
    // 特色队伍
    getteam() {
      var api = `${baseUrl}/apiJy/JyPcHugeDataApi/queryNewTeamInfo.json`;
      https.PostRequest(api).then(res => {
        if (res.data.code === 0) {
          var datas = res.data.data;
          var aaa = [0, 0, 12, 0, 8, 18, 14, 32, 78, 122, 22, 0];
          datas.map((item, index) => {
            item.index = index;
            item.activityNum = datas[index].activityNum + aaa[index];
          });
          this.volunlist1 = datas;
        }
      });
    },
    // 街办
    gettree() {
      var api = `${baseUrl}/apiJy/JyPcHugeDataApi/queryNewTreeInfo.json`;
      https.PostRequest(api).then(res => {
        if (res.data.code === 0) {
          var datas = res.data.data;
          var aaa = [32, 5, 5, 6, 30, 0];
          datas.map((item, index) => {
            item.index = index;
            item.activityNum = datas[index].activityNum + aaa[index];
          });
          this.volunlist4 = datas;
        }
      });
    },
    // 示范站
    getsite() {
      var api = `${baseUrl}/apiJy/JyPcHugeDataApi/queryNewSiteInfo.json`;
      https.PostRequest(api).then(res => {
        if (res.data.code === 0) {
          var datas = res.data.data;
          var aaa = [6, 3, 4, 9, 7, 3, 8, 2, 4, 9, 7, 2, 6, 8, 5];
          datas.map((item, index) => {
            item.index = index;
            item.orderNum = aaa[index];
          });
          this.volunlist2 = datas;
        }
      });
    },
    getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    },
    // 活动分布
    getEcharts3() {
      var athis = this;
      var Apiurl = `${baseUrl}/apiJy/JyPcHugeDataApi/queryActivityRatio.json`;
      https
        .PostRequest(Apiurl)
        .then(res => {
          if (res.data.code != 0) {
            alert(res.data.msg);
            return;
          }
          var datas = res.data.data;
          for (var i = 0; i < datas.length; i++) {
            athis.datas3.title.push(datas[i].name);
            athis.datas3.count.push({
              value: datas[i].count,
              name: datas[i].name
            });
          }
          athis.datas3.totalNum = datas[0].totalNum;
        })
        .catch(err => {
        });
    },
    // 优秀志愿者
    changeSelect(e) {
      this.statisticalList = [];
      this.statisticalType = e.target.value;
      this.getStatistical();
    },
    getStatistical() {
      var api = `${baseUrl}/apiJy/JyPcHugeDataApi/queryListByTypeAndNum.json`;
      var params1 = {
        type: 4, //项目
        num: 5
      };
      https.PostRequest(api, params1).then(res => {
        if (res.data.code === 0) {
          this.statisticalList = res.data.data;
        }
      });
      var params2 = {
        type: 3, //组织
        num: 5
      };
      https.PostRequest(api, params2).then(res => {
        if (res.data.code === 0) {
          this.statisticalList1 = res.data.data;
        }
      });
      var params3 = {
        type: 1, //志愿者
        num: 5
      };
      https.PostRequest(api, params3).then(res => {
        if (res.data.code === 0) {
          this.statisticalList2 = res.data.data;
        }
      });
    },
    timestampToTime(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var y = date.getFullYear();
      var MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      // var s = date.getSeconds();
      // s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  },
  destroyed() {
    clearInterval(this.nowTimes());
  }
};
</script>
<style lang="less">
.amap-logo {
  display: none;
  opacity: 0;
}

.amap-copyright {
  opacity: 0;
  display: none;
}

.amap-container {
  background: none !important;
}

.amap-icon {
  width: 60px !important;
  height: 60px !important;
}

.amap-marker-label {
  height: 40px;
  top: 10px !important;
  left: 30px !important;
}

.amap-info-contentContainer.bottom-left,
.amap-info-contentContainer.bottom-center,
.amap-info-contentContainer.bottom-right {
  position: absolute;
  // left: 300px;
  // top: -20px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 370px;
  height: 260px;
  border-radius: 10px 10px 0px 10px;
}

.amap-info-content {
  width: 370px;
  height: 260px;
  background: rgba(33, 232, 255, 0.4);
  border-radius: 10px 10px 0px 10px;
  box-shadow: inset 2px 2px 10px 2px #21e8ff;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 1.5;
  padding: 20px;
}

.bottom-center .amap-info-sharp {
  bottom: 50%;
  left: -4px;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(33, 232, 255, 0.4);
  transform: rotate(90deg);
  display: none;
}

.amap-info-close {
  font-size: 30px;
  color: #fff;
  top: 13px;
  right: 15px !important;
}
</style>
